${require('./_sidebar.html') active="dropdowns-link"}

Dropdowns

Dropdown menus and custom selects without JavaScript.

Dropdowns are built with <details role="list"> as a wrapper and <summary> and <ul> as direct children.

For style consistency with the form elements, dropdowns are styled like a <select> by default.

<!-- Dropdown -->
<details role="list">
  <summary aria-haspopup="listbox">Dropdown</summary>
  <ul role="listbox">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
  </ul>
</details>

<!-- Select -->
<select>
  <option value="" disabled selected>Select</option>
  <option>…</option>
</select>

<summary role="button"> transforms the dropdown into a button.

<!-- Primary -->
<details role="list">
  <summary aria-haspopup="listbox" role="button">
    Dropdown as a button 1
  </summary>
  <ul role="listbox">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
  </ul>
</details>

<!-- Secondary -->
<details role="list">
  <summary aria-haspopup="listbox" role="button" class="secondary">
    Dropdown as a button 2
  </summary>
  <ul role="listbox">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
  </ul>
</details>

<!-- Contrast -->
<details role="list">
  <summary aria-haspopup="listbox" role="button" class="contrast">
    Dropdown as a button 3
  </summary>
  <ul role="listbox">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
  </ul>
</details>

Dropdowns can be used as custom selects with <input type="radio"> or <input type="checkbox">

<!-- With radio buttons -->
<details role="list">
  <summary aria-haspopup="listbox">Dropdown</summary>
  <ul role="listbox">
    <li>
      <label for="small">
        <input type="radio" id="small" name="size" value="small">
        Small
      </label>
    </li>
    <li>
      <label for="medium">
        <input type="radio" id="medium" name="size" value="medium">
        Medium
      </label>
    </li>
    <li>
      <label for="large">
        <input type="radio" id="large" name="size" value="large">
        Large
      </label>
    </li>
  </ul>
</details>

<!-- With checkboxes -->
<details role="list">
  <summary aria-haspopup="listbox">Dropdown</summary>
  <ul role="listbox">
    <li>
      <label>
        <input type="checkbox">
        Banana
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox">
        Watermelon
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox">
        Apple
      </label>
    </li>
  </ul>
</details>


          Dropdowns can be used inside a <nav> with a nested <details role="list">
          Example with a dropdown as a link:
          
            
              
                Brand
              
              
                Link
                
                  
                    Dropdown
                    
                      Action
                      Another action
                      Something else here
                    
                  
                
              
            
            

<nav>
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <ul>
    <li><a href="#">Link</a></li>
    <li>
      <details role="list" dir="rtl">
        <summary aria-haspopup="listbox" role="link">Dropdown</summary>
        <ul role="listbox">
          <li><a>Action</a></li>
          <li><a>Another action</a></li>
          <li><a>Something else here</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

             
          
          Example with a default dropdown and a dropdown as a button:
          
            
              
                
                  
                    Dropdown
                    
                      Action
                      Another action
                      Something else here
                    
                  
                
                
                  
                    Dropdown
                    
                      Action
                      Another action
                      Something else here
                    
                  
                
              
            
            

<nav>
  <ul>
    <li>
      <details role="list">
        <summary aria-haspopup="listbox">Dropdown</summary>
        <ul role="listbox">
          <li><a>Action</a></li>
          <li><a>Another action</a></li>
          <li><a>Something else here</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details role="list">
        <summary aria-haspopup="listbox" role="button">Dropdown</summary>
        <ul role="listbox">
          <li><a>Action</a></li>
          <li><a>Another action</a></li>
          <li><a>Something else here</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

             
          
          You can also use  <li role="list"> as a nested wrapper to render a list as a dropdown.
          ℹ️ This syntax is experimental. In this version, the dropdown menu is triggered on hover.
          
            
              
                Brand
              
              
                Link
                Link
                
                  Dropdown
                  
                    Action
                    Another action
                    Something else here
                  
                
              
            
            

<nav>
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li role="list" dir="rtl">
      <a href="#" aria-haspopup="listbox">Dropdown</a>
      <ul role="listbox">
        <li><a>Action</a></li>
        <li><a>Another action</a></li>
        <li><a>Something else here</a></li>
      </ul>
    </li>
  </ul>
</nav>



        ${require('./_footer.html')}